<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right">
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="设备代码" prop="device_id">
                        <div style="display:flex;width:100%">
                            <el-input v-model="device_code" readonly style="width:100%"></el-input>
                            <el-button @click="checkDev" type="primary">选择设备</el-button>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备名称">
                        <el-input v-model="device_name" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="设备类别">
                        <el-input v-model="device_type" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报修人" prop="admin_id">
                        <el-select v-model="form.admin_id"  filterable style="width: 100%" placeholder="请选择报修人" disabled>
                            <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="故障类别" prop="fault_id">
                        <el-select v-model="form.fault_id"  filterable style="width: 100%" placeholder="请选择故障类别" clearable>
                            <el-option v-for="item in faultList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="紧急程度" prop="urgent_id">
                        <el-select v-model="form.urgent_id"  filterable style="width: 100%" placeholder="请选择紧急程度" clearable>
                            <el-option v-for="item in urgentList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="故障描述" prop="remark">
                        <el-input v-model="form.remark" clearable type="textarea"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="故障图片" prop="img">
                        <sc-upload v-model="form.img" draggable ></sc-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-form-item label="审批流程" prop="flow_id">
                        <el-select v-model="form.flow_id"  filterable style="width: 100%" placeholder="请选择审批流程" clearable @change="change">
                            <el-option v-for="item in flowList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="checkType==2">
                    <el-form-item label="审批人" prop="check_admin_ids">
                        <el-select v-model="form.check_admin_ids"  filterable style="width: 100%" placeholder="请选择审批人" multiple>
                            <el-option v-for="item in humList" :key="item.id" :label="item.name" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-col :span="12" v-if="checkType==1">
                <el-form-item label="审批人" prop="check_admin_ids" v-if="mode!='show'">
                    <el-steps style="flex: 1;" :active="active">
                        <el-step v-for="(item, key) in hum" :key="key" :title="item.flow_title" >
                            <template #description v-if="item.user_id_info.length">
                                <text v-for="(userInfo, key) in item.user_id_info" :key="key">{{ userInfo.name }}</text>
                            </template>
                        </el-step>
                    </el-steps>
                </el-form-item>
                <el-form-item label="审批人" prop="check_admin_ids" v-if="mode=='show'">
                    <el-steps style="flex: 1;" :active="active">
                        <el-step v-for="(item, key) in hum" :key="key" :title="item.flow_title">
                            <template #description v-if="item.user_id_info.length">
                                <p v-for="(userInfo, key) in item.user_id_info" :key="key">{{ userInfo.name }}</p>
                            </template>
                        </el-step>
                    </el-steps>
                </el-form-item>
            </el-col>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
    <device-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false" draggable :query="{is_no:1}"></device-list>
</template>

<script>
import deviceList from '../../deviceList.vue'
export default {
  components: { deviceList },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增故障报修单',
				edit: '编辑故障报修单',
				show: '查看'
			},
            dialog: {
				save: false,
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				id: "",
				device_id: "",
				fault_id: "",
				urgent_id: "",
				img: "",
				remark: "",
				flow_id: "",
                admin_id:this.$TOOL.data.get("USER_INFO").admin_id,
                check_admin_ids:[]
			},
            device_code:"",
            device_name:"",
            device_type:"",
            listId:"",
			//验证规则
			rules: {
				device_id: [
					{ required: true, message: '请选择设备' }
				],
				flow_id: [
					{ required: true, message: '请选择审批流程' }
				],
                fault_id: [
					{ required: true, message: '请选择故障类别' }
				],
                urgent_id: [
					{ required: true, message: '请选择紧急程度' }
				],
			},
            show:true,
            deviceList:[],//设备列表
            faultList:[],//故障类别
            urgentList:[],//紧急程度
            humList:[],//人员
            flowList:[],//审批
            hum:[],
            flowPath:[],
            checkType:"",
		}
	},
    computed: {
        active() {
            return this.hum.length ? this.hum.length + 1 : 0;
        }
    },
	mounted() {
        this.getFault()
        this.getUrgent()
        this.getHum()
        this.getFlow()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
					var res = [];
                    this.form.check_admin_ids = this.form.check_admin_ids.toString()
					if (this.form.id) {
						res = await this.$API.device.Maintenance.edit.post(this.form);
					} else {
						res = await this.$API.device.Maintenance.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode,this.listId)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.id = data.id
            var res = await this.$API.device.Maintenance.detail.post({id:data.id});
			this.form.device_id = res.data.device_id
			this.form.fault_id = res.data.fault_id
			this.form.urgent_id = res.data.urgent_id
			this.form.img = res.data.img
			this.form.remark = res.data.remark
			this.form.flow_id = Number(res.data.flow_id)
			this.form.admin_id = Number(res.data.admin_id)
            this.flowPath = res.data.flow
            var a  = await this.$API.all.getFlowItem.get({flow_id:Number(res.data.flow_id)});
            this.hum = a.data.flow_data
            this.device_code = res.data.device_code
            this.device_name = res.data.device_title
            this.device_type = res.data.class_title
            this.flowList.map(item=>{
                if(res.data.flow_id==item.id){
                    if(item.check_type==2){
                        this.checkType=2
                    }else{
                        this.checkType = 1
                    }
                }
            })
            let array = (res.data.flow[0].flow_uids).split(",")
            this.form.check_admin_ids = array.map(uid => parseInt(uid))
		},
        setId(data){
            console.log('data :>> ', data);
            this.form.device_id = data.id
            this.device_code = data.code
            this.device_name = data.title
            this.device_type = data.class_title
            this.listId = data.listId
        },
        // 选择设备
        checkDev(){
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
        },
        // 故障类别
        async getFault(){
            var res = await this.$API.all.getFault.get({is_page:0});
            this.faultList = res.data;
        },
        // 紧急程度
        async getUrgent(){
            var res = await this.$API.all.getUrgent.get({is_page:0});
            this.urgentList = res.data;
        },
        // 人员
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
        },
        // 审批
        async getFlow(){
            var res = await this.$API.all.getFlow.get({is_page:0});
            this.flowList = res.data
        },
        async change(e){
            this.flowList.map(item=>{
                if(e==item.id){
                    if(item.check_type==2){
                        this.checkType=2
                    }else{
                        this.checkType = 1
                    }
                }
            })
            if(e ==''){
                this.show = true
            }else{
                var res = await this.$API.all.getFlowItem.get({flow_id:e});
                this.hum = res.data.flow_data
                this.show = false
            }
        },
        typeChange(e){
            this.deviceList.map(item=>{
                if(e==item.id){
                    this.name = item.title,
                    this.type = item.class_title
                }
            })
        },
        handleSuccess(data) {
            console.log('data :>> ', data);
            this.form.device_id = data[0].id
            this.device_code = data[0].code
            this.device_name = data[0].title
            this.device_type = data[0].class_title
            this.listId = data[0].class_title
        },
	}
}
</script>

<style lang="scss">
    .margin{
        margin-left: 15px;
    }
</style>
